import React, { useState }  from 'react';
import { ScrollView, Text, View, StyleSheet, Alert,Button,Platform} from 'react-native';
import { MapView, Circle, Polygon, Polyline, Marker, LatLng, CameraPosition, voidEvent } from 'react-native-amap3d';

import type * as ReactNative from "react-native";

function AMapDemo8() {
    const target: LatLng = { latitude: 39.806901, longitude: 116.438055 }
    const cameraPosition: CameraPosition = { target: target, zoom: 13 }
    const [myLocation, setmyLocation] = useState<boolean>(false)
    const flag = 1
    const isHarmonyOS = Platform.OS !== 'ios' && Platform.OS !== 'android'
    const [type, setMapType] = useState(isHarmonyOS ? flag : flag - 1);
    return (
        <View style={styles.container}>
            <View > 
                View
                <MapView
                style={{ width:  `${100}%`, height: `${90}%` }}
                mapType={type}
                myLocationEnabled={myLocation}
                initialCameraPosition={cameraPosition}
                onPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
                    console.info("AMapViewEventType map3d demo " + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
                }}
                onLongPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
                    console.info("AMapViewEventType map3d demo longevent===" + event.nativeEvent.latitude + "===" + event.nativeEvent.longitude)
                }}
                onLoad={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
                    Alert.alert("onLoad successful")
                }}>
            </MapView>
            <Button title= {myLocation ? '取消显示当前位置' : '显示当前位置'} onPress={() => setmyLocation(!myLocation)}></Button>
            </View>
          
        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        flex: 1,
        paddingTop: 24,
    }
});
export default AMapDemo8;